<template>
  <view class="vote">
    <view class="vote-item" :class="clickIndex!==''?'vote-item-active':''" v-for="(item,index) in voteList"
          @click.stop="setVote(index,item)">
      <view class="vote-item-title">{{ item.title }}</view>
      <view class="vote-item-count" v-if="clickIndex!==''">{{ item.count }}人</view>
      <view class="vote-item-bj" :class="clickIndex===index?'vote-item-bj-active':''"
            :style="clickIndex!==''?'width: '+(item.count/allCount*100)+'%;':''"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      voteList: [],
      allCount: 0,
      clickIndex: ''
    };
  },
  created() {
    if (this.item.contentType !== 3) {
      return
    }
    if (this.item.hasPkEnd === 1) {
      this.clickIndex = 100
    }
    this.voteList = this.item.voteList.map((item, index) => {
      this.allCount += item.rate
      if (item.selected === 1) {
        this.clickIndex = index
      }
      return {
        title: item.optionContent,
        count: item.rate,
        id: item.optionId
      }
    })
  },
  methods: {
    async setVote(index, item) {
      if (this.clickIndex !== '') {
        return
      }
      let data = {
        optionId: item.id,
        topicId: this.item.id
      }
      let res = await this.$javaCircle.doRequest('post', 'circle/customer/vote/takeVote', data, 'json')
      if (res.data.code !== 0) {
        uni.showToast({title: res.data.message, icon: "none"})
        return
      }
      if (res.data.data.integral > 0) {
        uni.showToast({title: "已获得" + res.data.data.integral + "积分", icon: "none"})
      }
      this.voteList[index].count++
      this.allCount++
      this.clickIndex = index;
      this.$emit('chageInfo', this.clickIndex)
    },
    setIndex(index) {
      this.voteList[index].count++
      this.allCount++
      this.clickIndex = index;
    }
  },
}
</script>

<style lang="scss">
.vote {
  width: 100%;

  .vote-item {
    width: 100%;
    border-radius: 12upx;
    border: 2upx solid #61BD7F;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 25upx 30upx;
    margin-top: 24upx;
    position: relative;
    transition: all .3s linear;

    .vote-item-title {
      font-size: 40upx;
      color: #54B174;
      font-weight: 500;
      margin: auto;
      position: relative;
      z-index: 1;
      transition: all .3s linear;
    }

    .vote-item-count {
      font-size: 40upx;
      color: #777677;
      position: relative;
      z-index: 1;
    }

    .vote-item-bj {
      height: 100%;
      width: 0;
      border-radius: 12upx;
      position: absolute;
      left: 0;
      top: 0;
      transition: all .3s linear;
      background-color: #F1EFF2;
    }
  }

  .vote-item-active {
    background-color: #FCF8FB;
    border: none;

    .vote-item-title {
      margin-left: 0;
      color: #333333;
    }
  }

  .vote-item-bj-active {
    background: #C9EFD6 !important;
  }
}
</style>
